<script lang="ts" setup name="ClassifyConfigStyle">
import { ref, onMounted, toRefs } from "vue";
import oneImage from "@/assets/images/oneMode.png";
import gridImage from "@/assets/images/gridImage.png";
interface Props {
  datas: {
    linkPosition: string;
    linkType: number;
    text: string;
    linkName: string;
  };
}
const props = defineProps<Props>();
const { datas } = toRefs(props);

// interface Emits {
//   (name: "ClassifyConfig", value: string): void;
// }
// const emits = defineEmits<Emits>();
</script>

<template>
  <div class="HomePageTemplateStyle">
    <!-- <div>{{ props.datas }}</div> -->
    <div class="title">
      {{ props.datas.text }}
      <!-- <el-button type="primary" @click="emits('ClassifyConfig', 'ClassifyConfig')">确认</el-button> -->
    </div>
    <div class="content">
      <el-form label-width="120px" label-suffix="：">
        <!-- <el-form-item label="店铺名称">
          <el-input v-model="datas.linkName"></el-input>
        </el-form-item>
        <el-form-item label="名称位置">
          <el-radio-group v-model="datas.linkPosition">
            <el-radio label="居左" value="left"></el-radio>
            <el-radio label="居中" value="center"></el-radio>
            <el-radio label="居右" value="right"></el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="模版样式">
          <el-radio-group v-model="datas.linkType">
            <el-radio label="单列模式" :value="0"></el-radio>
            <el-radio label="宫格模式" :value="1"></el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label-width="0">
          <div style="padding-left: 20px">
            <el-image style="width: 320px; height: 555px" :src="!datas.linkType ? oneImage : gridImage"></el-image>
          </div>
        </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  margin-bottom: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  border-left: 4px solid var(--el-color-primary);
}
.content {
  height: 600px;
  padding: 10px;
}
</style>
